<template>
  <div style="padding: 10px;">
    <Form label-position="top">
          <Row>
            <Col span="5">
              <FormItem>
                <Input
                  style="width: 90%;"
                  v-model="projectInfoSearch.shortName"
                  placeholder="请输入项目简称"
                  clearable
                />
              </FormItem>
            </Col>
            <Col span="5">
              <FormItem>
                <Select
                  v-model="projectInfoSearch.dictEngineeringType"
                  clearable
                  style="width: 90%;"
                  ref="treeSelect"
                  placeholder="请选择工程类型"
                >
                  <Option
                    v-for="item in list"
                    :value="item.code"
                    :key="item.code"
                    >{{ item.title }}</Option
                  >
                  <Tree
                    :data="engineeringTypeList"
                    style="padding-left:20px"
                    @on-select-change="checkEng"
                  ></Tree>
                </Select>
              </FormItem>
            </Col>
            <Col span="5">
              <FormItem>
                <Select
                  v-model="projectInfoSearch.dictRiskGrade"
                  clearable
                  style="width: 90%;"
                  placeholder="请选择风险等级"
                >
                  <Option
                    v-for="item in riskGradeList"
                    :value="item.code"
                    :key="item.code"
                    >{{ item.name }}</Option
                  >
                </Select>
              </FormItem>
            </Col>
            <Col span="5">
              <FormItem>
                <Select
                  v-model="projectInfoSearch.manageEntId"
                  style="width: 90%;"
                  clearable
                  ref="treeSelectEnt"
                  placeholder="请选择管理单位"
                >
                  <Option
                    v-for="item in list3"
                    :value="item.id"
                    :key="item.id"
                    >{{ item.title }}</Option
                  >
                  <Tree
                    :data="entTree"
                    style="padding-left:20px"
                    @on-select-change="checkEnt"
                  ></Tree>
                </Select>
              </FormItem>
            </Col>
            <Col span="5">
              <FormItem>
                <Select
                  v-model="projectInfoSearch.dictConstructionState"
                  clearable
                 style="width: 90%;"
                  placeholder="请选择施工状态"
                >
                  <Option
                    v-for="item in constructionStateList"
                    :value="item.code"
                    :key="item.code"
                    >{{ item.name }}</Option
                  >
                </Select>
              </FormItem>
            </Col>
            <Col span="4" style="text-align: right;float:right;">
              <Button
                type="primary"
                style="margin-right: 15px"
                v-if="searchButton"
                @click="getProjectList"
                >搜索</Button
              >
              <Button type="primary" @click="clickButton('add')" v-if="addButton">新增</Button>
            </Col>
          </Row>
    </Form>
    <Table border ref="selection" :columns="columns" :data="projectList">
      <template slot-scope="{ row, index }" slot="action">
        <span
          title="编辑"
          class="button-class"
          type="text"
          v-if="editButton"
          @click="clickButton('edit', row.id, '编辑')"
          >编辑</span
        >
        <span
          title="详情"
          class="button-class"
          type="text"
          v-if='detailButton'
          @click="clickButton('details', row.id, '详情')"
          >详情</span
        >
        <span
          title="删除"
          class="button-class"
          type="text"
          v-if="delButton"
          @click="deleteBtn(row.id)"
          >删除</span
        >
      </template>
    </Table>
    <Page
      class="tab-page"
      :page-size-opts='[10,20,50,100]'
      :total="page.total"
      :current="page.current"
      :page-size="page.pageSize"
      @on-change="pageChange"
      @on-page-size-change="sizeChange"
      show-elevator
      show-sizer
      show-total 
    />
  </div>
</template>

<script>
import Utils from '../../../common/util'
export default {
  name: 'project-info',
  data() {
    return {
      projectInfoSearch: {}, //搜索条件
      engineeringTypeList: [], //工程类型
      riskGradeList: [], //风险等级
      constructionStateList: [], //施工状态
      entTree:[],//管理单位
      projectList: [],
      list: [],
      list3:[],
      page: {
        total: 0,
        current: 1,
        pageSize: 10,
        totalPage: 0
      },
      addButton:false,//新增按钮
      searchButton:false,//搜索按钮
      editButton: false, //编辑按钮
      detailButton: false, //详情按钮
      delButton: false, //删除按钮
      buttonList: localStorage.getItem('buttonList'), //按钮权限
      columns: [
        {
          title: '序号',
          align: 'center',
          render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page.current - 1) * this.page.pageSize + 1
                        )
                    }
        },
        {
          title: '项目名称',
          key: 'shortName',
          align: 'center',
          render: (h, params) => {
              return h('div', [
                  h('span', {
                      style: {
                          display: 'inline-block',
                          width: '100%',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap'
                      },
                      domProps: {
                          title: params.row.shortName
                      }
                  }, params.row.shortName)
              ])
          }
        },
        {
          title: '工程类型',
          key: 'dictEngineeringTypeName',
          align: 'center'
        },
        // {
        //   title: '专业类型',
        //   align: 'center',
        //   key: 'wbsName'
        // },
        {
          title: '风险等级',
          align: 'center',
          key: 'dictRiskGradeName'
        },
        {
          title: '施工状态',
          align: 'center',
          key: 'dictConstructionStateName'
        },
        {
          title: '项目经理',
          align: 'center',
          key: 'pmName',
          width: '130'
        },
        {
          title: '联系电话',
          align: 'center',
          key: 'tel',
          width: '150'
        },
        {
          title: '管理单位',
          align: 'center',
          key: 'manageEntName',
          render: (h, params) => {
              return h('div', [
                  h('span', {
                      style: {
                          display: 'inline-block',
                          width: '100%',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap'
                      },
                      domProps: {
                          title: params.row.manageEntName
                      }
                  }, params.row.manageEntName)
              ])
          }
        },
        {
          title: '操作',
          align: 'center',
          width: '200',
          slot: 'action'
        }
      ]
    }
  },
  mounted() {
    let self = this
    Utils.$on('demo', msg => {
      self.getProjectList()
        
    })
    this.getButtonStatus();//按钮权限
    this.getEngineeringType()
    this.getRiskGrade()
    this.getConstructionState()
    this.getProjectList()
    this.getEntTree()
  },
  methods: {
    //获取按钮权限
        getButtonStatus() {
            let path = this.$route.name
            JSON.parse(this.buttonList).forEach((item, index) => {
                if (Object.keys(item)[0] == path) {
                    this.button = item[path];
                }
            })
            this.button.forEach(val => {
                if (val.code == "P_0201_01") {
                    this.addButton = true;
                } else if (val.code == "P_0201_02") {
                    this.editButton = true
                } else if (val.code == "P_0201_03") {
                    this.delButton = true
                } else if (val.code == "P_0201_04") {
                    this.detailButton = true
                } else if (val.code == "P_0201_05") {
                    this.searchButton = true
                }
            })
        },
    //获取工程类型
    getEngineeringType() {
      let code = 'ENGINEERING_TYPE'
      this.$api.projectInquiry.getTreeByTypeCode(code).then(res => {
        if (res.code == 200) {
          this.engineeringTypeList = res.data
          this.engineeringTypeList.forEach(item => {
            item.title = item.name
            if (item.children.length > 0) {
              item.children = this.getCheildItem(item.children)
            }
          })
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    //递归树状结构
    getCheildItem(data) {
      let item = data
      const arr = []
      item.forEach(val => {
        let obj = {}
        obj.title = val.name
        obj.code = val.code
        obj.children = []
        if (val.children.length > 0) {
          obj.children = this.getCheildItem(val)
        }
        arr.push(obj)
      })
      return arr
    },
    checkEng(data) {
      if (data[0].children.length > 0) {
        this.$Message.warning('请选择最子级节点')
      } else {
        this.list = []
        let code = data[0].code
        let title = data[0].title
        this.list.push({
          code,
          title
        })
        this.projectInfoSearch.dictEngineeringType = code
        this.$refs.treeSelect.visible = false
      }
    },
    //获取风险等级
    getRiskGrade() {
      let code = 'RISK_GRADE'
      this.$api.projectInquiry.getListByTypeCode(code).then(res => {
        if (res.code == 200) {
          this.riskGradeList = res.data
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    //获取施工状态
    getConstructionState() {
      let code = 'CONSTRUCTION_STATE'
      this.$api.projectInquiry.getListByTypeCode(code).then(res => {
        if (res.code == 200) {
          this.constructionStateList = res.data
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    //获取管理单位
    getEntTree() {
      this.$api.projectInquiry.getEntTree().then(res => {
        if (res.code == 200) {
          this.entTree = res.data
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    checkEnt(data) {
      this.list3 = []
      if(data[0].objectId){
        let id = data[0].objectId
        let title = data[0].title
        this.list3.push({
          id,
          title
        })
        if(id){
          this.projectInfoSearch.manageEntId = id
          this.$refs.treeSelectEnt.visible = false
        }
      }else{
        this.$Message.warning(`请选择具体的${data[0].title}！`)
      }
      
      

    },
    // 新增/编辑/详情
    clickButton(type, id, name) {
      const addId = parseInt(Math.random() * 100000)
      const route = {
        name: type == 'add' ? 'projectInfo-add' : type == 'edit' ? 'projectInfo-edit' : 'projectInfo-detail',
        params: {
          type: type,
          id: type == 'add' ? addId : id,
          name:
            type == 'add'
              ? '新增项目信息'
              : type == 'edit'
              ? '编辑项目信息'
              : '详情'
        }
      }
      console.log(id)
      this.$router.push(route)
    },
    //获取项目列表
    getProjectList() {
      let data = {
        pageSize: this.page.pageSize,
        currentPage: this.page.current,
        whereMap: this.projectInfoSearch
      }
      this.$api.projectInquiry.getProjectList(data).then(res => {
        if (res.code == 200) {
          this.projectList = res.data.resultObject
          this.page.total = res.data.totalRecord
          this.page.totalPage = res.data.totalPage
          this.projectList.forEach(item => {
            item.pmName = item.projectManage.pmName
            item.tel = item.projectManage.tel
            item.manageEntName = item.projectManage.manageEntName
          })
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    pageChange(current) {
      this.page.current = current
      this.getProjectList()
    },
    sizeChange(size) {
      this.page.pageSize = size
      this.getProjectList()
    },
    //删除
    deleteBtn(id) {
      this.$Modal.confirm({
        title: '温馨提示',
        closable: true,
        content: '确认删除吗？',
        width: 360,
        onOk: () => {
          this.delProjectInfo(id)
        }
      })
    },
    //删除项目信息
    delProjectInfo(id) {
      this.$api.projectInfo.delProjectInfo(id).then(res => {
        if (res.code === 200) {
          this.$Message.success('删除成功')
          this.getProjectList()
        } else {
          this.$Message.error(res.message)
        }
      })
    }
  }
}
</script>

<style></style>
